import React, { useContext, useMemo, useState } from 'react'
import Myback from '../components/Myback'
import Ctx from '../store/Ctx'
import type { dataTs } from '../store/storeTs'
import { Tabs, ProductCard, Tag, Button } from 'react-vant'
import type { RouteComponentProps } from 'react-router-dom'

export default function My(props:RouteComponentProps) {

  //获取数据
  let obj = useContext(Ctx)

  //0是收藏 1是订阅
  let [change, setChange] = useState<number>(0)


  //订阅的个数
  let sub = useMemo(() => {
    return obj.datalist.reduce((p: number, n: dataTs) => {
      if (n.sub) {
        return p + 1
      }
      return p
    }, 0)
  }, [obj.datalist])

  //收藏的个数
  let collect = useMemo(() => {
    return obj.datalist.reduce((p: number, n: dataTs) => {
      if (n.collect) {
        return p + 1
      }
      return p
    }, 0)
  }, [obj.datalist])

  //儿童和小说的订阅个数
  let nan = useMemo(() => {
    return obj.datalist.reduce((p: number, n: dataTs) => {
      if (n.typeId !== 1 && n.sub) {
        return p + 1
      }
      return p
    }, 0)
  }, [obj.datalist])

  //筛选出收藏和订阅对应的页面
  let changeSc = useMemo(() => {
    return obj.datalist.filter((item: dataTs) => {
      if (change == 0) {
        return item.collect
      } else {
        return item.sub
      }
    })
  }, [obj.datalist, change])

  return (
    <div>
      <Myback title={'我的'} leftText></Myback>
      <p>订阅的个数:{sub}</p>
      <p>收藏的个数:{collect}</p>
      <p>儿童和小说的订阅个数:{nan}</p>

      {/* 标签页 */}
      <Tabs onChange={(e) => {
        setChange(e as number);
      }}>
        {['收藏', '订阅'].map(item => (
          <Tabs.TabPane key={item} title={item}></Tabs.TabPane>
        ))}
      </Tabs>

      {/* 卡片 */}
      <div style={{ height: 'calc(100vh - 200px)', overflowY: 'scroll' }}>
        {
          changeSc.map((item: dataTs) => {
            return <ProductCard 
            onClick={()=>{
              //点击跳转详情页
              props.history.push({
                pathname:'details',
                state:item.id
              })
            }}
              num={<>
                {
                  change ? <Button round size='small'
                    type={item.sub ? 'danger' : 'default'}
                    onClick={(e) => {
                      //阻止事件冒泡
                      e.stopPropagation()
                      //订阅状态切换
                      obj.dispatch({
                        type: 'change_sub',
                        payload: item.id
                      })
                    }}
                  >取消订阅</Button> :
                    <Button round size='small'
                      type={item.collect ? 'danger' : 'default'}
                      onClick={(e) => {
                        //阻止事件冒泡
                        e.stopPropagation()
                        //收藏状态切换
                        obj.dispatch({
                          type: 'change_collect',
                          payload: item.id
                        })
                      }}
                    >取消收藏</Button>
                }
              </>}
              key={item.id}
              desc={item.ms}
              title={item.title}
              thumb={item.img}
            />
          })
        }
      </div>

    </div>
  )
}
